<template>
  <div class="star-box">
    <div class="score-star">
      <template v-for="(item, index) in rating.stars">
        <img v-if="item" src="../assets/images/star.png" :key="index" />
        <img v-else src="../assets/images/no-star.png" :key="item" />
      </template>
    </div>
    <div class="score">
      {{ rating.score }}
    </div>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "App",
  components: {},
  props: ["rating"],
  setup() {
    return {};
  },
});
</script>

<style lang="less" scoped>
.flex-row {
  display: flex;
  align-items: center;
}

.star-box {
  .flex-row();
}

.score-star {
  .flex-row();

  img {
    width: 10px;
    height: 10px;
  }
}

.score {
  font-size: 14px;
  color: #999;
  margin-left: 5px;
}
</style>